<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="用户详情"
      width="50%"
      :before-close="handleClose"
    >
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-descriptions :column="2" direction="vertical">
            <el-descriptions-item label="用户名">王鸿运</el-descriptions-item>
            <el-descriptions-item label="注册时间"
              >2025-01-01 12：00：00</el-descriptions-item
            >
            <el-descriptions-item label="邮箱"
              >linxiaohua@email.com
            </el-descriptions-item>
            <el-descriptions-item label="会员等级">
              <div class="text-sm text-gray-900">
                <span
                  class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-50 !rounded-full"
                  >黄金会员</span
                >
                <span class="ml-2 text-xs text-gray-500"
                  >有效期至 2024-06-15</span
                >
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="手机号"
              >18734770923</el-descriptions-item
            >
            <div class="text-sm text-gray-900">
              <span
                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
                >正常</span
              >
            </div>
            <el-descriptions-item
              label="账号状态
"
              >王鸿运</el-descriptions-item
            >
            <el-descriptions-item label="紧急联系人"
              >小明（配偶）- 18734770923</el-descriptions-item
            >
            <el-descriptions-item label="备注信息"
              ><div class="text-sm text-gray-500">
                养有两只猫，经常使用自助洗护服务
              </div></el-descriptions-item
            >
          </el-descriptions>
          <div class="mt-6">
            <div class="mb-4">
              <h4 class="text-sm font-medium text-gray-900 mb-2">
                最近登录记录
              </h4>
              <div class="bg-gray-50 !rounded-lg p-4">
                <div class="space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">2023-08-20 15:30:25</span>
                    <span class="text-gray-700">iOS App</span>
                    <span class="text-gray-500">iPhone 14 Pro</span>
                    <span class="text-gray-500">192.168.1.100</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">2023-08-18 09:15:30</span>
                    <span class="text-gray-700">Android App</span>
                    <span class="text-gray-500">HUAWEI P50</span>
                    <span class="text-gray-500">192.168.1.102</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">2023-08-15 20:45:12</span>
                    <span class="text-gray-700">Web</span>
                    <span class="text-gray-500">Chrome</span>
                    <span class="text-gray-500">192.168.1.105</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消费记录" name="second">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="time" label="消费时间" width="180" />
            <el-table-column prop="project" label="消费项目" />
            <el-table-column prop="money" label="消费金额" />
            <el-table-column prop="paymentMethod" label="支付方式	" />
            <el-table-column prop="status" label="订单状态" width="180">
              <template #default="{ row }">
                <span
                  v-if="row.status == 1"
                  class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
                  >已完成</span
                >
                <span
                  v-else
                  class="px-2 py-1 text-xs font-medium text-red-700 bg-red-50 !rounded-full"
                  >未完成</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="宠物档案" name="third">
          <div id="petArchives" class="">
            <div class="grid grid-cols-2 gap-6">
              <div
                v-for="item in 3"
                :key="item"
                class="bg-white !rounded-lg p-6 border border-gray-200"
              >
                <div class="flex items-center mb-4">
                  <img src="data:," class="w-16 h-16 !rounded-full mr-4" />
                  <div>
                    <h3 class="text-lg font-medium text-gray-900">橙子</h3>
                    <p class="text-sm text-gray-500">英短</p>
                  </div>
                </div>
                <div class="space-y-3">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">性别</span>
                    <span class="text-gray-900">母</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">年龄</span>
                    <span class="text-gray-900">2岁3个月</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">体重</span>
                    <span class="text-gray-900">4.2kg</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">绝育状态</span>
                    <span class="text-gray-900">已绝育</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">疫苗接种</span>
                    <span class="text-gray-900">已完成全程</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="绑定设备" name="fourth">
          <div id="boundDevices" class="">
            <div class="grid grid-cols-2 gap-6">
              <div
                v-for="item in 5"
                :key="item"
                class="bg-white !rounded-lg p-6 border border-gray-200"
              >
                <div class="flex items-center justify-between mb-4">
                  <div class="flex items-center">
                    <i
                      class="fas fa-cat w-10 h-10 text-2xl text-primary flex items-center justify-center"
                    />
                    <div class="ml-3">
                      <h3 class="text-lg font-medium text-gray-900">
                        智能饮水机
                      </h3>
                      <p class="text-sm text-gray-500">设备编号：SW382910</p>
                    </div>
                  </div>
                  <span
                    class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
                    >在线</span
                  >
                </div>
                <div class="space-y-3">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">绑定时间</span>
                    <span class="text-gray-900">2023-06-20</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">剩余水量</span>
                    <span class="text-gray-900">1.2L</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">过滤芯寿命</span>
                    <span class="text-gray-900">剩余 80%</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-500">最近活动</span>
                    <span class="text-gray-900">10分钟前</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
// 接收参数
const props = defineProps(["open"]);
const status: any = reactive(props);
// eslint-disable-next-line vue/no-dupe-keys
const { open } = toRefs(status);
// 返回参数方法
const emits = defineEmits("detailChange");
// 控制显示隐藏
const dialogVisible = ref(false);
// 消费记录
const tableData = reactive<any>([
  {
    time: "2016-05-03",
    project: "猫咪洗护套餐",
    money: "200",
    paymentMethod: "支付宝",
    status: "1" //1已完成2未完成
  },
  {
    time: "2016-05-03",
    project: "猫咪洗护套餐",
    money: "200",
    paymentMethod: "支付宝",
    status: "2" //1已完成2未完成
  }
]);
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  emits("detailChange", dialogVisible.value);
};
// tabs值
const activeName = ref("first");
const handleClick = (t, e) => {
  activeName.value = t.props.name;
};
onMounted(() => {
  console.log("onMounted");
  dialogVisible.value = open;
});
</script>

<style scoped></style>
